<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //ES6 父类 基类
        class Person{
            //构造器函数,当类被实例化的时候,实例化对象会直接调用原型对象上的constructor方法
            constructor(name,age) {
                this.name = name
                this.age = age
            }

            //es10 address是实例化对象上的属性,可以不写在constructor中,不能被传参
            address = "尚硅谷"

            //给实例化对象上添加方法
            // do = function{
            //     console.log("我是实例化对象的方法do");
            // }

            //给原型对象扩展方法
            eat() {
                console.log("eat");
            }
            //静态方法
            static say = "hello react"
        }

        //ES6子类,子类必定是构造函数
        class Student extends Person {
            //只要子类书写constructor,必须再constructor中调用super
            //因为子类没有自己的this,需要通过super来构建自己的this
            constructor(name,age,score){
                super(name, age)
                //此时的this指向
                this.score = score
            }
            //给实例化对象上添加方法
            study = "react"
            //给原型对象扩展方法
            sleep() {
                console.log("上课睡觉");
            }
        }

        const s1 = new Student("laowang", 18, 100);
        const s2 = Student("zhangsan",20,98)//报错:必须要用new才能调用
        console.log(s1, "s1");
        console.log(s2, "s2");



         // 手写class
         Function.prototype.extends = function (pervent) {
            pervent.call(this, ...arguments);
            this.prototype = new pervent;
            // 修正子类的constructor
            this.prototype.constructor = this;
            console.log(this)
            return this
        }

        function Student(name, age, id) {
            // 构造函数继承
            Person.call(this, name, age);
            this.id = id;
        }
        const s3 = Student.extends(Person)
        console.dir(s3)


        
    </script>
</body>
</html>